﻿@{
    Layout = "~/Views/Shared/_LayoutBlank.cshtml";
    ViewBag.Title = "AssessmentTest";
}
<style type="text/css">
    body{
        padding-top:0;
    }

    .card {
        background: white;
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
        position: relative;
        margin: 1.5em auto;
        transition: box-shadow .25s;
        width: auto;
        padding: 1.5em;
    }

</style>

@*<h2>Assessment Test</h2>*@

<div class="card">
    <div class="container">
        <div class="row">
            <div class="col-md-1">
                
                <div style="width:66px;height:66px;background-color:antiquewhite;vertical-align:middle;text-align:center;">
                    ICON
                </div>
            </div>
            <div class="col-md-10">
                <div class="row">
                    @*<div class="col-md-6">left</div>
                    <div class="col-md-6" style="text-align:right;">
                        <button class="btn btn-primary">Preview Answer</button>
                        <button class="btn btn-primary">Cancel</button>
                        <button class="btn btn-primary">Apply Changes</button>

                    </div>*@

                    <div class="col-md-12">
                        <div style="float:right;">
                            <button type="button" class="btn btn-primary">Preview Answer</button>
                            <button type="button" class="btn btn-primary">Cancel</button>
                            <button type="button" class="btn btn-primary">Apply Changes</button>
                        </div>
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Basic Info</a></li>
                            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Tabulation</a></li>
                            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Answers</a></li>
                            @*<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>*@
                        </ul>

                        <hr />

                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="home"> 

                                <div class="row">
                                    <div class="col-md-9">

                                        <form class="form-horizontal">
                                            <div class="form-group">
                                                <label for="inputEmail3" class="col-sm-2 control-label">Title</label>
                                                <div class="col-sm-10">
                                                    <div class="input-text-counter text-right">23</div>
                                                    <input type="text" class="form-control" id="inputEmail3" placeholder="Title">
                                                    
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="inputPassword3" class="col-sm-2 control-label">Introduction</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" id="inputPassword3" placeholder="Introduction text">
                                                </div>
                                            </div>

                                        </form>
                                    </div>

                                    <div class="col-md-3">
                                        
                                        <div class="form-group">
                                            <label for="exampleInputPassword1"><strong>Coach</strong></label>
                                            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Coach">
                                        </div>

                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox"> Display on client
                                            </label>
                                        </div>

                                        <div class="form-group">
                                            <label><strong>Status</strong></label>
                                            <select class="form-control">
                                                <option>Draft</option>
                                                <option>Live</option>
                                            </select>
                                        </div>

                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox"> Anonymous Assessment <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
                                            </label>
                                        </div>
                                        

                                    </div>
                                </div>

                            
                            </div>
                            <div role="tabpanel" class="tab-pane" id="profile"> Tabulation </div>
                            <div role="tabpanel" class="tab-pane" id="messages"> Answers 
                                <p>
                                    @*<video id="video" type="video/mp4" controls></video>*@
                                    <input type="file" id="fileInput" accept="video/*" />
                                    <video controls autoplay></video>
                                </p>

                                <button class="btn btn-primary" onclick="capture()">Capture</button> <br /><br />
                                <canvas id="canvas"></canvas> <br /><br />


                                @*<input type="file" id="fileInput">*@
                            </div>

                            @*<div role="tabpanel" class="tab-pane" id="settings"> settings </div>*@
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>

</div>



@section scripts {
<script type="text/javascript">
    function capture() {
        var canvas = document.getElementById('canvas');
        var video = document.getElementById('video');
        canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    }

    $("#fileInput").change(function (e) {
        var file, reader;

        file = e.target.files[0];
        reader = new FileReader();

        reader.onload = function (e) {
            //debugger;
            //var mime = "video/mp4";
            //var blob = new Blob([e.target.result], { type: mime }),     // create a blob of buffer
            //    url = (URL || webkitURL).createObjectURL(blob),         // create o-URL of blob
            //    video = document.createElement("video");

            //var rawData = reader.result;
            //debugger;
            //var f = file;
            //$("#video").src = rawData;

            //https://jsfiddle.net/dsbonev/cCCZ2/

            //var file = this.files[0];
            //var type = file.type;
            //var videoNode = document.querySelector('video');
            //var canPlay = videoNode.canPlayType(type);
            //if (canPlay === '')
            //    canPlay = 'no';

            //var message = 'Can play type "' + type + '": ' + canPlay;
            //var isError = canPlay === 'no';
            ////displayMessage(message, isError)

            //if (isError) {
            //    return
            //}

            //var fileURL = URL.createObjectURL(file)
            //videoNode.src = fileURL
        }

        reader.readAsDataURL(file);
    });
</script>
}